<template>
    <div>
        <h2>门店详情</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td>
                     {{  quertInfo.ShopName}}   
                    </td>
                </tr>
                <tr>
                    <td align="right"> 分店名称</td>
                    <td>
                      {{ quertInfo.BranchName }}  
                    </td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td>
                     
                        <img :src="quertInfo.Photo" width="100" height="100" v-if="quertInfo.Photo!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td>
                     {{ quertInfo.BeginTime }}  
                    </td>
                </tr>
                <tr>
                    <td align="right">是否启用</td>
                    <td>
                       {{ quertInfo.State ==1?"启用":"禁用"}} 
                    </td>
                </tr>
                <tr>
                    <td align="right">门店特色</td>
                    <td>
                    {{quertInfo.Feature  }}   
                    </td>
                </tr>

                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                      {{ quertInfo.Desc }} 
                    </td>
                </tr>
                <tr>
                    <td align="right">门店位置</td>
                    <td>
                       {{addressname }} 
                    </td>
                </tr>
                <tr>
                    <td align="right">酒店类型</td>
                    <td>
                    <span v-if="quertInfo.ShopType==1">普通酒店</span>
                    <span v-if="quertInfo.ShopType==2">三星酒店</span>
                    <span v-if="quertInfo.ShopType==3">五星酒店</span>
                    <span v-if="quertInfo.ShopType==4">电竞酒店</span>
                    <span v-if="quertInfo.ShopType==5">商务酒店</span>
                    <span v-if="quertInfo.ShopType==6">民宿酒店</span>
                   

                    </td>
                </tr>
               
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
const router=useRouter();
const route=useRoute();


//1.把门店读取出来 2.完成图片上传 3.增加
//1.把门店读取出来
onMounted(()=>{
    addrshow();
    fantian()
})

let addressname=ref()

//返填
const fantian=()=>{
    axios({
        url:'/api/Shop/GetShopModel',
        method:'get',
        params:{
            id:route.query.id,
        }
    })
    .then(res=>{
        console.log(res);
        quertInfo.ShopName=res.data.ShopName
        quertInfo. BranchName=res.data.BranchName
        quertInfo.Photo=res.data.Photo
        quertInfo.BeginTime=res.data.BeginTime.substring(0,10)
        quertInfo.State=res.data.State
        quertInfo.Feature=res.data.Feature
        quertInfo. Desc=res.data.Desc
        quertInfo.AddressId=res.data.AddressId
        quertInfo.ShopType=res.data.ShopType


        //根据地址id获得名字
        addressname.value=showaddr.list.find((item:any)=>{

            if(item.Id==quertInfo.AddressId){
                return item;
            }
            return item.Id=quertInfo.AddressId;
        }).Name
    })
    .catch(err=>{
        console.log(err);
    })
}



//显示门店位置
let showaddr:any=reactive({
    list:[],
})

//添加门店向后端传递的数据
let quertInfo:any=reactive({    
   
  "ShopName": "",
  "BranchName": "",
  "Photo": "",
  "BeginTime": "",
  "State":'',
  "Feature": [],
  "Desc": "",
  "AddressId": '',
  "ShopType": '',
})



const addrshow=()=>{
    axios({
        method:'get',
        url:'/api/Shop/GetShopAddresses',
        
    })
    .then(res=>{
        console.log(res);
        showaddr.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}




</script>

<style scoped>

</style>